<template>
      <div id="facepay">
            <div class="pay">
                  <div class="title">刷脸支付“扑面而来”</div>
                  <div class="content">
                        <div class="item" v-for="(item, index) in list" :key="index">
                              <div class="name">{{ item.name }}</div>
                              <img :src="item.image" alt="">
                              <div class="info">{{ item.info }}</div>
                        </div>
                  </div>
            </div>
            <!--  -->
            <div class="youshi">
                  <div class="title">三大优势</div>
                  <div class="subtitle">服务百万商家，专注行业解决方案，更多盈利模式</div>
                  <div class="list">
                        <div class="item" v-for="(item, index) in list2" :key="index">
                              <img :src="item.image" alt="">
                              <div class="name">{{ item.name }}</div>
                              <div class="info">{{ item.info }}</div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        list: [
                              {
                                    name: "1.0时代",
                                    image: require("../../assets/img/a1.png"),
                                    info: "现金支付"
                              },
                              {
                                    name: "2.0时代",
                                    image: require("../../assets/img/a2.png"),
                                    info: "刷卡支付"
                              },
                              {
                                    name: "3.0时代",
                                    image: require("../../assets/img/a3.png"),
                                    info: "扫码支付"
                              },
                              {
                                    name: "4.0时代",
                                    image: require("../../assets/img/a4.png"),
                                    info: "刷脸支付"
                              },

                        ],
                        list2: [
                              {
                                    name: "识别精准",
                                    image: require("../../assets/img/a5.png"),
                                    info: "一次识别通过率在99%以上。持续不断进行算法优化，可以通过不断的训练使识别变得更智能"
                              },
                              {
                                    name: "极速高效",
                                    image: require("../../assets/img/a6.png"),
                                    info: "支持海量人脸的存储与检索，算法一流，整体识别流程耗时小于1s，节约支付环节的等待时间"
                              },
                              {
                                    name: "安全可靠",
                                    image: require("../../assets/img/a7.png"),
                                    info: "人脸识别时，自研硬件搭载3D结构光活体检测技术，可拦截照片、面具、视频等攻击手段，安全可靠"
                              },
                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#facepay {
      width: 100%;
      margin-top: 80px;
      min-width: 1440px;
      .pay {
            width: 1440px;
            margin: 0 auto;
            // padding-top: 30px;
            .title {
                  font-size: 30px;
                  width: 100%;
                  text-align: center;
                  line-height: 60px;
            }
            .content {
                  width: 100%;
                  display: flex;
                  padding-top: 50px;
                  justify-content: space-around;
                  align-items: center;
                  text-align: center;
                  font-size: 24px;
                  img {
                        width: 115px;
                        height: 115px;
                        display: block;
                        margin: 20px auto;
                  }
                  .name {
                        color: #2B40CC;
                  }
            }
      }
      .youshi {
            width: 1440px;
            margin: 30px auto;
            text-align: center;
            margin-top: 70px;
            .title {
                  font-size: 30px;
                  
            }
            .subtitle {
                  font-size: 16px;
                  margin: 10px 0;
            }
            .list {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-around;
                  margin: 30px 0;
                  .item {
                        width: 256px;
                        height: 300px;
                        text-align: center;
                        padding: 30px;
                        border: 1px solid #2b40cc;
                        border-radius: 10px;
                        .name {
                              margin: 20px 0;
                              font-size: 24px;
                        }
                        .info {
                              font-size: 16px;
                              text-align: justify;
                        }
                  }
            }
      }
}
</style>